<template>
	<view class="member">
		<public-module></public-module>
		<!-- <u-search placeholder="用手机号搜索用户信息" @search="search(e)" bgColor="#ffffff" borderColor="#93D17C" :showAction="false" v-model="keyword"></u-search> -->
<!-- 		<view class="tabsAll">
			<view>
				<u-tabs :list="list1" lineColor="#33B37E" :activeStyle="{color:'#33B37E' }"  :inactiveStyle="{color:'#AAAAAA'}" lineWidth="40"  @click="clickType"></u-tabs>
			</view>
		</view>
		 -->
		<view class="u-page" style="text-align: center;">
			<block v-if="indexList.length > 0">
			
			<u-list @scrolltolower="scrolltolower" height="calc(100vh - 320rpx)">
				<u-list-item v-for="(item, index) in indexList" :key="index">
						<view class="memberList" >
							<view class="memberList-top">
								<view class="memberList-top-title">{{item.store.storename}}</view>
								<view class="memberList-top-time">{{item.created_at}}</view>
							</view>
							<view class="memberList-lower">
								<view >
									<u-avatar size="72"  :src="ossUrl + item.user.headimgurl" ></u-avatar>
								</view>
								<view class="memberList-lower-content">
									<view style="margin-top: 20rpx;"  class="memberList-lower-content-info" >
										<text class="memberList-lower-content-info-one">姓名:</text>
										<text class="memberList-lower-content-info-two">{{item.user.nickname}}</text>
									</view>
									<view style="margin-top: 24rpx;" class="memberList-lower-content-info" >
										<text class="memberList-lower-content-info-one">电话:</text>
										<text class="memberList-lower-content-info-two">{{item.user.tel}}</text>
									</view>
								</view>
								<view class="memberList-lower-price">
									
									<!-- 499元 -->
								</view>
							</view>
						</view>
				</u-list-item>
			</u-list>
			</block>
			<block v-else>
				<text >暂无数据</text>
			</block>
		</view>
		<tabBar selectedIndex=0 plugins=2></tabBar>
	</view>

</template>

<script>
	import base from '@/config/baseUrl';
	import tabBar from "@/components/tabbar/tabbar.vue";
	import { getAssistanceAll } from '@/config/api.js';
	export default {
		data() {
			return {
				bgColor: '#001f3f',
				indexList: [],
				keyword:'',
				 list1: [{
					name: '本月',
				}, {
					name: '季度',
				}, {
					name: '全年'
				}],
				assist_type:1,
				id:0,
				page:1 ,//页数
				type:1,//类型 1本月 2季度 3全年
				isOver:0, //是否加载完成
				isLoding:0,//是否正在加载
				store_name:'',
				baseUrl:base.baseUrl,
				ossUrl:base.ossUrl
			};
		},
		components:{
			tabBar
		},
		onLoad(option) {
			this.id = option.id;
			this.assist_type = option.assist_type;
			uni.setStorageSync("pagesName", "assistList")
		},
		onShow() {
			this.type = 1;
			this.keyword =''
			this.page = 1;
			this.isOver = 0;
			this.indexList =[];
			this.loadmore()
		},
		
		methods: {
			
			// navigateBack() {
				
			//   uni.navigateBack({
			// 	isRefresh: false,
			//   });
			// },
			clickType(e)
			{
				//点击类型
				this.type = e.index+1;
				this.keyword =''
				this.page = 1;
				this.isOver = 0;
				this.indexList =[];
				this.loadmore()
			},
			//搜索
			search(e)
			{
				this.type =1;
				this.page = 1;
				this.isOver = 0;
				this.indexList =[];
				this.loadmore()
			},
			//用户分页数据
			loadmore() {
				let _this =this;
				if(_this.isOver ==1 || _this.isLoding ==1 ){return;}
				_this.isLoding = 1;
				let httpData={
					page:_this.page,
					id:_this.id,
					assist_type:_this.assist_type,
				};
				getAssistanceAll(httpData).then((res) => {
					_this.indexList = _this.indexList.concat(res.data.data);
					_this.isLoding = 0;
					if(_this.page >= res.data.last_page)
					{
						//加载完成
						_this.isOver = 1;
					}else{
						 _this.page = _this.page+1;
					}
				}).catch((err) =>{
					_this.isLoding = 0;
				})
				
			},
			scrolltolower()
			{
				this.loadmore()
				
			},
			jumpAssistList(id){
				uni.navigateTo({
					url: '/staff/assistList/assistList?id='+id
				});
			},
			jumpList(id){
				uni.navigateTo({
					url: '/staff/optometryList/optometryList?id='+id
				});
			}
		}
	}
	
</script>

<style lang="scss">
	* {
	        box-sizing: border-box;
	}
	.member{
		background-color: #fff;
		padding: 24rpx 32rpx;
		.u-tabs__wrapper__nav__line {
		    bottom: 13rpx !important;
		}
		.tabsAll{
			display: flex;
			justify-content: space-between;
			&-price{
				height: 80rpx;
				line-height: 80rpx;
				color: #33B37E;
				font-size: 32rpx;
				&-unit{
					color: #777777;
					font-size: 24rpx;
				}
			}
		}
		.memberList{
			width: 677rpx;
			hight: 234rpx;
			border-radius: 10rpx;
			margin-left: 6rpx;
			 box-shadow:   
			    0 1px 3px rgba(0, 0, 0, 0.1), /* 上边框阴影 */  
			    1px 0 3px rgba(0, 0, 0, 0.1), /* 右边框阴影 */  
			    0 -1px 3px rgba(0, 0, 0, 0.1), /* 下边框阴影 */  
			    -1px 0 3px rgba(0, 0, 0, 0.1); /* 左边框阴影 */
			 /* 定义边框 */  
			// border: 1rpx solid #000000; /* 边框宽度、样式、颜色 */  
			margin-top:24rpx ;
			padding: 20rpx 32rpx 24rpx 32rpx;
			&-top{
				display: flex;
				justify-content: space-between;
				&-title{
					color: #FEE039;
					font-size: 24rpx;
				}
				&-time{
					color: #777777;
					font-size: 24rpx;
				}
			}
			&-lower{
				display: flex;
				justify-content: space-between;
				margin-top: 12rpx;
				&-content
				{
					margin-left: -80rpx;
					&-info{
						
						&-one{
							font-size: 28rpx;
							color: #333333;
							font-weight:600;
						}
						&-two{
							margin-left: 24rpx;
							font-size: 28rpx;
							color: #333333;
							font-weight:400;
						}
					}
				}
				&-price
				{
					padding-top: 87rpx;
					color: #33B37E;
					font-size: 28rpx;
				}
			}
		}
		
	}

</style>
